<template>
  <div class="box">
    <div class="top">
      <h3>资料填写</h3>
      <p>请认真填写信息哦, 方便我们联系您</p>
    </div>
    <div class="content">
      <div>
        <span>名称</span>
        <input type="text" placeholder="请输入公司/店铺名称" />
      </div>
      <div>
        <span>姓名</span>
        <input type="text" placeholder="请输入您的姓名" />
      </div>
      <div>
        <span>电话</span>
        <input type="text" placeholder="请输入您的电话" />
      </div>
      <div>
        <span>微信号</span>
        <input type="text" placeholder="请输入您的微信号" />
      </div>
      <div>
        <span>行业</span>
        <input type="text" placeholder="请输入您的行业" />
      </div>
      <div @click="popService">
        <!-- 服务选择器 -->
        <view class="section">
          <span>选择服务</span>
          <picker mode="selector" :value="index" @change="bindPickerChange" :range="serviceArray">
            <view class="gray picker">{{serviceInfo}}</view>
          </picker>
        </view>
      </div>
      <div style="background: transparent;font-weight: bold;">
        <span>备注:</span>
      </div>
      <div style="background: transparent;" class="gray">
        <span>以上信息务必真实, 方便工作人员及时与您取得联系。</span>
      </div>
    </div>
    <div class="footer">
      <button @click="submitInfo">保存提交</button>
      <p class="gray">汇方圆科技</p>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      serviceFlag: false,
      serviceArray: ["代理", "定制、开发"],
      serviceInfo: "请选择您要了解的项目>"
    }
  },

  components: {
  },

  methods: {
    popService() {
      this.serviceFlag = true;
    },
    bindPickerChange(e) {
      this.serviceInfo = this.serviceArray[e.mp.detail.value] + ">";
    },
    submitInfo() {
      wx.navigateTo({ url: '/pages/012_ziliao_ok/main' });
    }
  },

  mounted() {
    // let app = getApp()
  },
  onShow () {
    wx.setNavigationBarTitle({ title: '资料填写' })
  }
}
</script>

<style scoped>
.box {
  width: 100%;
  height: 100%;
  background: #eee;
  font-size: 14px;
}

.box .top {
  line-height: 20px;
  padding: 10px;
}
.box .top h3 {
  font-size: 16px;
  color: #333;
}
.box .top p {
  color: #aaa;
}

.box .content > div {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 8px 10px;
  margin-bottom: 1px;
  background: #fff;
}
.box .content span {
  padding: 8px 10px;
}
.box .content input {
  width: 180px;
  padding: 8px 10px;
  border: none;
  outline: none;
  text-align: right;
}
.box .gray {
  color: #757575;
}

.box .footer {
  width: 100%;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 20px;
}

.box .footer button {
  width: 80%;
  background: #32b16c;
  color: #fff;
  text-align: center;
  border-radius: 5px;
  outline: none;
  border: none;
  height: 36px;
  line-height: 36px;
  margin-bottom: 20px;
}

.box .section {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
</style>
